<script lang="ts" setup>
import {} from 'vue'
import store from '@/store'
import { routerPush } from '@/utils/tools'

const colseLink = (item: any) => {
  store.commit('deleteLinkListByKey', item)
}
const clickLink = (key: string | number) => {
  routerPush({ name: key as string })
}
</script>

<template lang="pug">
div(class="yu")
  n-tag(closable class="link mr-2 cursor-pointer animate__animated animate__backInLeft" round size="small" v-for="item in store.state.linkList" :type="item.type" @close.stop="colseLink(item)" @click="clickLink(item.key)" :disabled="store.state.linkList.length === 1") {{item.label}}
</template>

<style lang="scss" scoped>
.yu {
  position: relative;
  white-space: nowrap;
  height: 29px;
  overflow-y: hidden;
  &::-webkit-scrollbar {
    display: none;
  }
}
// .link {
//   margin-right: 10px;
//   cursor: pointer;
// }
</style>
